<template>
  <view class="custom-nav-bar">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 导航栏内容 -->
    <view class="nav-content" :style="{ height: headerHeight + 'px' }">
      <!-- 左侧内容 -->
      <view class="nav-left">
        <slot name="left">
          <view v-if="showBack" class="nav-back-btn" @click="handleBack" :style="backButtonStyle">
            <image class="nav-back-icon" :src="backIcon" mode="aspectFit"></image>
          </view>
        </slot>
      </view>
      
      <!-- 中间标题 -->
      <view class="nav-center">
        <slot name="center">
          <text v-if="title" class="nav-title" :style="{ color: titleColor }">{{ title }}</text>
        </slot>
      </view>
      
      <!-- 右侧内容 -->
      <view class="nav-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';
import { getStatusBarHeight, getHeaderHeight, getCloseButtonStyle } from '@/utils/system';

// 定义props
const props = defineProps({
  // 是否显示返回按钮
  showBack: {
    type: Boolean,
    default: true
  },
  // 标题
  title: {
    type: String,
    default: ''
  },
  // 标题颜色
  titleColor: {
    type: String,
    default: '#333'
  },
  // 返回按钮图标
  backIcon: {
    type: String,
    default: '/static/Images/common/Guanbihei.png'
  },
  // 背景色
  backgroundColor: {
    type: String,
    default: 'transparent'
  },
  // 是否固定定位
  fixed: {
    type: Boolean,
    default: false
  }
});

// 定义事件
const emit = defineEmits(['back']);

// 获取系统信息
const statusBarHeight = getStatusBarHeight();
const headerHeight = getHeaderHeight();

// 返回按钮样式
const backButtonStyle = computed(() => {
  return getCloseButtonStyle();
});

// 处理返回
const handleBack = () => {
  emit('back');
  if (!emit('back')) {
    uni.navigateBack();
  }
};
</script>

<style lang="scss" scoped>
.custom-nav-bar {
  position: relative;
  z-index: 999;
  
  &.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
}

.status-bar {
  background-color: transparent;
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  position: relative;
}

.nav-left,
.nav-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.nav-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.nav-back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-back-icon {
  width: 40rpx;
  height: 40rpx;
}

.nav-title {
  font-size: 36rpx;
  font-weight: 500;
  text-align: center;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>